<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input{
            width: 140px;
            height: 50px;
            border-style: none;
            text-align: left;
            font-size: 25px;
            outline: none;
            background-color: #808080;
        }
    </style>
</head>
<body>
<font id="a1">•</font>
&nbsp;<input type="text" value="曼联"  id="f1" onmouseover="run1()" onmouseout="str1()"><br/>
<font id="a2">•</font>
&nbsp;<input type="text" value="中国" id="f2" onmouseover="run2()" onmouseout="str2()"><br/>
<font id="a3">•</font>
&nbsp;<input type="text" value="美国" id="f3" onmouseover="run3()" onmouseout="str3()"><br/>
<font id="a4">•</font>
&nbsp;<input type="text" value="阿根廷" id="f4" onmouseover="run4()" onmouseout="str4()"><br/>
<font id="a5">•</font>
&nbsp;<input type="text" value="西班牙" id="f5" onmouseover="run5()" onmouseout="str5()"><br/>

</body>
<script>
    function str1() {
        document.getElementById("a1").innerHTML="•";
        var id = document.getElementById("f1");
            id.style.backgroundColor="#808080";
            id.style.fontSize=25+"px";

    }
    function str2() {
        document.getElementById("a2").innerHTML="•";
        var id = document.getElementById("f2");
        id.style.backgroundColor="#808080";
        id.style.fontSize=25+"px";
    }
    function str3() {
        document.getElementById("a3").innerHTML="•";
        var id = document.getElementById("f3");
        id.style.backgroundColor="#808080";
        id.style.fontSize=25+"px";
    }
    function str4() {
        document.getElementById("a4").innerHTML="•";
        var id = document.getElementById("f4");
        id.style.backgroundColor="#808080";
        id.style.fontSize=25+"px";
    }
    function str5() {
        document.getElementById("a5").innerHTML="•";
        var id = document.getElementById("f5");
        id.style.backgroundColor="#808080";
        id.style.fontSize=25+"px";
    }
    function run1() {
        document.getElementById("a1").innerHTML="●";
        var id = document.getElementById("f1");
        id.style.backgroundColor="red";
        id.style.fontSize=35+"px";
    }
    function run2() {
        document.getElementById("a2").innerHTML="●";
        var id = document.getElementById("f2");
        id.style.backgroundColor="red";
        id.style.fontSize=35+"px";
    }
    function run3() {
        document.getElementById("a3").innerHTML="●";
        var id = document.getElementById("f3");
        id.style.backgroundColor="red";
        id.style.fontSize=35+"px";
    }
    function run4() {
        document.getElementById("a4").innerHTML="●";
        var id = document.getElementById("f4");
        id.style.backgroundColor="red";
        id.style.fontSize=35+"px";
    }
    function run5() {
        document.getElementById("a5").innerHTML="●";
        var id = document.getElementById("f5");
        id.style.backgroundColor="red";
        id.style.fontSize=35+"px";
    }
</script>
</html>